<template>
	<view class="layout">
		<view class="content">

			<view class="scrollView" v-for="item in listArr" :key="item._id">
				<view class="item">
					<text>{{ formatTimestamp(item.startTime) }}</text>
					<view class="divider"></view>
					<view class="infoList">
						<view class="info">
							<text>学员：</text>
							<text>{{item.username}}</text>
						</view>
						<view class="info">
							<text>词库：</text>
							<text>{{ item.title }}</text>
						</view>
						<view class="info">
							<text>模式：</text>
							<text>{{ item.mode === 0 ? "学新" : "复习" }}</text>
						</view>
					</view>
					<view class="divider"></view>
					<view class="itemBottom">
						<view class="printBtn" @click="onClickStudyContent(item.words, item.wordBankId)">
							查看学习内容
						</view>
						<view class="feedbackBtn" @click="onClickFeedback(item._id)">
							查看反馈
						</view>
					</view>
				</view>
			</view>
			<uni-load-more :status="uniLoad"></uni-load-more>		
		
		</view>
	</view>
</template>

<script setup>
	import { onLoad, onReachBottom } from '@dcloudio/uni-app';
	import { ref } from 'vue';
	
	import { useUserInfoStore } from '../../store';	
	
	//获得store实例对象
	const userInfoStore = useUserInfoStore()
	
	const listArr = ref([])
	
	const uniLoad = ref("more")
	let noMore = false
	
	let uuid = "";
	
	onLoad(()=>{
		if(userInfoStore.userInfo.role === 0){
			uuid = userInfoStore.userInfo.uuid
		} else if(userInfoStore.userInfo.role === 1){
			uuid = userInfoStore.selectedStudentInfo.uuid
		}
		
		getData()
	})
	
	onReachBottom(() => {
		console.log("触底")
		uniLoad.value = "loading"
		console.log(1)
		if(noMore) {
			uniLoad.value = "noMore";
			return;
		}
		console.log(2)
		getData()
	})
	
	function onClickStudyContent(arr, wordBankId) {
		uni.navigateTo({
			url: "/pages/study-content/study-content?arr=" + encodeURIComponent(JSON.stringify(arr)) + `&wordBankId=${wordBankId}`
		})
	}
	
	function onClickFeedback(feedbackId){
		uni.navigateTo({
			url: `/pages/feedback-detail/feedback-detail?feedbackId=${feedbackId}&editMode=0`
		})
	}
	
	function getData() {
		uniCloud.callFunction({
			name: "getFeedbackList",
			data: {
				relateUuid: uuid,
				skip: listArr.value.length
			}
		}).then(res => {
			let oldList = listArr.value;
			if(res.result.data.length < 10) {
				uniLoad.value = "noMore";
				noMore = true
			}
			let newList = [...oldList, ...res.result.data]
			listArr.value = newList
		})
	}
	
	function formatTimestamp(timestamp) {
	  const date = new Date(timestamp);
	  
	  const year = date.getFullYear();
	  const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始，所以要加1
	  const day = String(date.getDate()).padStart(2, '0');
	  const hours = String(date.getHours()).padStart(2, '0');
	  const minutes = String(date.getMinutes()).padStart(2, '0');
	  
	  return `${year}-${month}-${day} ${hours}:${minutes}`;
	}
</script>

<style lang="scss">
	.layout{
		.content{
			padding: 20rpx;
			.scrollView{
				font-size: 40rpx;
				.item{
					background-color: white;
					margin: 20rpx 0;
					padding: 20rpx;
					.divider {
					  height: 1px; /* 分割线的高度 */
					  background-color: #e0e0e0; /* 分割线的颜色 */
					  margin: 20px 0; /* 分割线上下外边距 */
					}
					.infoList{
						display: flex;
						flex-direction: column;
						gap: 20rpx;
						.info{
							
						}
					}
					.itemBottom{
						margin-top: 40rpx;
						display: flex;
						justify-content: flex-end;
						gap: 30rpx;
						.printBtn{
							border: 1rpx solid #18BB7C;
							padding: 10rpx 20rpx;
							border-radius: 40rpx;
						}
						.feedbackBtn{
							border: 1rpx solid #18BB7C;
							padding: 10rpx 20rpx;
							border-radius: 40rpx;
						}
					}

				}
			}
		}
	}
</style>
